<template>
  <div>
    <van-search
      v-model="value"
      shape="round"
      background="#3087e6"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />

    <!-- tab标签 -->
    <van-tabs v-model="active">
      <van-tab :title="item.name" v-for="(item,index) in channel" :key="index">
          <ArticleList :channelID="item.id" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ArticleList from "./ArticleList.vue";
export default {
  name: "MyArticleList",
  components: {
      ArticleList
  },
  data() {
    return {
      value: "",
      active: 0,
      channel: [],
    };
  },
  mounted() {
    this.$axios
      .get(
        "https://www.fastmock.site/mock/4f60d566644d6646e94d679ea86f9287/aixue8/channel"
      )
      .then((res) => {
        // console.log(res.data);
        this.channel = res.data;
      });
  },
  methods: {
    onSearch(value) {
      console.log(value);
      // 这里发送ajax请求查询
    },
  },
};
</script>

<style>
</style>